  <%= javascript_include_tag "tk_phong" %>
  <%= javascript_include_tag "jquery-ui" %>

<script xmlns="http://www.w3.org/1999/html"></script>

<div id="porlet_1" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"></div>
<div id="porlet_2">
  <div class="porlet_2"><b><a href="#">
    <!-- NAME -->
    TK PHÒNG
    <!-- END - NAME-->
  </a></b>
  </div>
</div>
<div id="porlet_3"></div>
<div id="porlet_4">
  <div class="porlet_4">&nbsp;</div>
</div>
<div id="porlet_5"></div>
<div style="clear:left"></div>
<div class="main_porlet">
  <!-- CONTENT -->

  <!-- SEARCH -->
      <div style="padding: 15px; text-align: right;" class="form_item">
        <h1>Thông tin chung</h1>
        <table style="margin-bottom: 20px;" class="reportTable">
          <tr>
            <td class="field" style="width: auto"><b>Số phòng khoa quản lí</b></td>
            <td style="padding-left: 10px;"><%= Phong.count %></td>
          </tr>
          <tr>
            <td class="field" style="width: auto;"><b>Số phòng thường</b></td>
            <td style="padding-left: 10px;"><%= Phong.where( :MaLoai_id => 1 ).count %></td>
          </tr>
          <tr>
            <td class="field" style="width: auto;"><b>Phòng máy</b></td>
            <td style="padding-left: 10px;"><%= Phong.where( :MaLoai_id => 2 ).count %></td>
          </tr>
          <tr>
            <td class="field" style="width: auto;"><b>Phòng khoa</b></td>
            <td style="padding-left: 10px;"><%= Phong.where( :MaLoai_id => 3 ).count %></td>
          </tr>
        </table>
        <table>
          <tr>
            <td class="field" style="width: auto;">Chọn thông tin phòng cần xem</td>
            <td style="padding-left: 30px;">
              <select data-bind="options: Phongs, optionsText: 'Ten', value: PhongChon" style="height: 29px; width: 175px; margin-top: 10px;" ></select>
            </td>
            <td style="padding: 10px 0 0 10px;">
              <button class="g-button g-button-submit" data-bind="click: Show">Xem</button>
            </td>
          </tr>
          <tr style="text-align: center; margin-top: 5px;">
            <td colspan="3" style="padding-top: 10px;">
              <a data-bind="attr: { href: '/thong_kes/tk_phong.xls?phongID=' + idChon() }">Xuất báo cáo</a>
            </td>
          </tr>
        </table>
        <!-- End - SEARCH -->
        <div id="Content">
        <h1 style="text-align: left;" data-bind="text: 'Chi tiết sử dụng ' + tenChon()"></h1>
        <div style="float: left; text-align: left; "><b>Nhân viên quản lí:</b></div>
        <div style="margin: 10px; text-align: center;"><b data-bind="text: Quanli"></b></div>

          <!-- Chart -->
          <div style="height: 350px">
            <div id = "BTK1" style="float: left; text-align: left">
              <table class="reportTable">
                <thead>
                  <th style="width: 70%">Tên</th>
                  <th>Số lượng</th>
                </thead>
                <tbody data-bind="foreach: DsLoais">
                <tr data-bind="visible: SoLuong > 0">
                  <td data-bind="text: Ten"></td>
                  <td data-bind="text: SoLuong"></td>
                </tr>
                </tbody>
                <tfoot>
                  <td style="text-align: right; padding-right: 20px">Tổng cộng   </td>
                  <td>430</td>
                </tfoot>
              </table>
              <button id="Xem_BDTK1" class="g-button">Xem biểu đồ</button>
            </div>
            <div id = "BDTK1">
              <div id="Chart1" style="height: 300px; margin-bottom: 10px"></div>
              <button id="Xem_BTK1" class="g-button">Xem bảng thống kê</button>
            </div>
          </div>

          <h1>Tình trạng sử dụng tài sản</h1>
          <div style="height: 350px">
            <div id = "BTK2" style="float: left; text-align: left">
              <table class = "reportTable">
                <thead>
                  <th style="width: 70%">Tình trạng</th>
                  <th>Số lượng</th>
                </thead>
                <tbody>
                <tr>
                  <td>Thiết bị tốt</td>
                  <td data-bind="text: Tots"></td>
                </tr>
                <tr>
                  <td>Thiết bị đang sửa</td>
                  <td data-bind="text: Suas"></td>
                </tr>
                <tr>
                  <td>Thiết bị chờ thanh lí</td>
                  <td data-bind="text: ThanhLis"></td>
                </tr>
                </tbody>
              </table>
              <button id="Xem_BDTK2" class="g-button">Xem biểu đồ</button>
            </div>
            <div id = "BDTK2">
              <div id ="Chart2" style="height: 300px; margin-bottom: 10px"></div>
              <button id="Xem_BTK2" class="g-button">Xem bảng thống kê</button>
            </div>
          </div>
          <!-- End Chart -->

  <h1>Bảng kê chi tiết</h1>
  <!-- SORT -->
  <div class="form_item">
    <table style="margin: -20px 0 10px 0;">
      <tr>
        <td class="field" style="width: 220px; text-align: right;">Lọc theo loại</td>
        <td style="padding-left: 30px;">
          <select data-bind="options: DsLoais, optionsText: 'Ten', value: LoaiChon" style="height: 29px; width: 175px; margin-top: 10px;" ></select>
        </td>
      </tr>
      <tr style="margin-top: 10px;">
        <td class="field" style="text-align: right">Lọc theo tình trạng</td>
        <td style="padding-left: 30px;">
          <!--%= select_tag 'tinhtrang', options_for_select([["Tất cả", "all"], "Tốt", "Đang Sửa", "Thanh Lí"], :selected => params[:tinhtrang]),:style => "height: 29px; width: 175px; margin-top: 5px;" %>-->
          <select data-bind="options: TinhTrangs, value: TTChon" style="height: 29px; width: 175px; margin-top: 5px;"></select>
        </td>
        <td style="padding: 5px 0 0 10px;">
          <button data-bind="click: Sort" class="g-button g-button-submit" >Lọc</button>
        </td>
      </tr>
    </table>
    <!-- end - SORT -->
    <!-- Table -->
    <div id="ct_phong" class="datagrid" >
      <table>
        <thead style="text-align: center;">
        <tr>
          <th style="width: 40%;">Tên tài sản</th>
          <th>Ngày bắt đầu sử dụng</th>
          <th>Tình trạng</th>
          <th>Sô lượng</th>
        </tr>
        </thead>
        <tbody id="CtPhongs" data-bind="foreach: CtPhongs">
        <tr>
          <td data-bind="text: TenTS"></td>
          <td data-bind="text: Ngay"></td>
          <td data-bind="text: TinhTrang"></td>
          <td data-bind="text: SoLuong"></td>
        </tr>
        </tbody>
        <tbody id="CtLoc"  data-bind="foreach: CtLocs">
        <tr>
          <td data-bind="text: TenTS"></td>
          <td data-bind="text: Ngay"></td>
          <td data-bind="text: TinhTrang"></td>
          <td data-bind="text: SoLuong"></td>
        </tr>
        </tbody>
        <tfoot data-bind="visible: CtLocs().length == 0">
        <tr>
            <td colspan="4" class="emptymsg">Không tìm thấy!</td>
        </tr>
        </tfoot>
      </table>
    </div>
    <!-- End - Table -->
  </div>
  </div>
  <div style="clear:both;"></div>

  </div>
  <!-- END - CONTENT -->
</div>
